import { useAppDispatch } from '@/app/hooks'
import { useState } from 'react'
import { search } from './slice'



export default function SearchHeader () {

  const [searchName, setSearchName] = useState('')

  const dispatch = useAppDispatch()

  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={searchName} onChange={e => setSearchName(e.target.value)} type="text" placeholder="enter the name you search"/>
        <button onClick={() => dispatch(search(searchName))}>Search</button>
      </div>
    </section>
  )
}
